<template>
  <div class="security-encryption-container">
    <div class="page-header">
      <div class="title">安全加密保护</div>
      <div class="subtitle">量子加密 · 多重防护</div>
    </div>

    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item
          ><router-link to="/files"><FolderOutlined />档案文件管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item
          ><router-link to="/files/electronic-archive"><LaptopOutlined />电子档案管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item><SafetyOutlined />{{ $route.meta.title }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="stats-section">
      <a-row :gutter="[16, 16]">
        <a-col :span="6">
          <div class="stat-card">
            <SafetyOutlined class="stat-icon" />
            <div>
              <div class="stat-title">加密文件</div>
              <div class="stat-value">{{ stats.encryptedFiles }}万</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card">
            <SafetyCertificateOutlined class="stat-icon" />
            <div>
              <div class="stat-title">安全等级</div>
              <div class="stat-value">{{ stats.securityLevel }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card">
            <KeyOutlined class="stat-icon" />
            <div>
              <div class="stat-title">密钥数量</div>
              <div class="stat-value">{{ stats.keyCount }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card">
            <AlertOutlined class="stat-icon" />
            <div>
              <div class="stat-title">安全事件</div>
              <div class="stat-value">{{ stats.securityEvents }}</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <div class="encryption-management">
      <a-row :gutter="[24, 24]">
        <a-col :span="12">
          <a-card title="加密策略" :bordered="false">
            <div class="encryption-algorithms">
              <div class="algorithm-item">
                <div class="algorithm-info">
                  <div class="algorithm-name">AES-256</div>
                  <div class="algorithm-desc">对称加密算法</div>
                </div>
                <a-tag color="green">启用</a-tag>
              </div>
              <div class="algorithm-item">
                <div class="algorithm-info">
                  <div class="algorithm-name">RSA-4096</div>
                  <div class="algorithm-desc">非对称加密算法</div>
                </div>
                <a-tag color="green">启用</a-tag>
              </div>
              <div class="algorithm-item">
                <div class="algorithm-info">
                  <div class="algorithm-name">Quantum-ECC</div>
                  <div class="algorithm-desc">量子椭圆曲线加密</div>
                </div>
                <a-tag color="blue">测试中</a-tag>
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :span="12">
          <a-card title="密钥管理" :bordered="false">
            <div class="key-management">
              <div class="key-item">
                <div class="key-info">
                  <div class="key-name">主密钥</div>
                  <div class="key-id">KEY-MASTER-001</div>
                </div>
                <a-tag color="red">高危</a-tag>
              </div>
              <div class="key-item">
                <div class="key-info">
                  <div class="key-name">档案加密密钥</div>
                  <div class="key-id">KEY-ARCHIVE-002</div>
                </div>
                <a-tag color="orange">中危</a-tag>
              </div>
              <div class="key-item">
                <div class="key-info">
                  <div class="key-name">传输加密密钥</div>
                  <div class="key-id">KEY-TRANS-003</div>
                </div>
                <a-tag color="green">低危</a-tag>
              </div>
            </div>

            <div style="margin-top: 16px">
              <a-space>
                <a-button type="primary">生成新密钥</a-button>
                <a-button>密钥轮换</a-button>
              </a-space>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <div class="security-monitoring">
      <a-card title="安全监控" :bordered="false">
        <a-row :gutter="[16, 16]">
          <a-col :span="8">
            <div class="monitor-item">
              <div class="monitor-title">入侵检测</div>
              <div class="monitor-status">
                <a-badge status="success" text="正常运行" />
              </div>
              <div class="monitor-detail">实时监控网络入侵行为</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="monitor-item">
              <div class="monitor-title">异常访问</div>
              <div class="monitor-status">
                <a-badge status="warning" text="发现1个异常" />
              </div>
              <div class="monitor-detail">检测到可疑访问模式</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="monitor-item">
              <div class="monitor-title">数据泄露</div>
              <div class="monitor-status">
                <a-badge status="success" text="无威胁" />
              </div>
              <div class="monitor-detail">监控数据外传行为</div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>

    <div class="security-logs">
      <a-card title="安全日志" :bordered="false">
        <a-table :columns="logColumns" :data-source="securityLogs" :pagination="{ pageSize: 10 }">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'level'">
              <a-tag :color="getLevelColor(record.level)">{{ record.level }}</a-tag>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { HomeOutlined, FolderOutlined, LaptopOutlined, SafetyOutlined, KeyOutlined, AlertOutlined, SafetyCertificateOutlined } from '@ant-design/icons-vue'

const stats = reactive({
  encryptedFiles: 95.8,
  securityLevel: 'AAA+',
  keyCount: 256,
  securityEvents: 0
})

const logColumns = [
  { title: '时间', dataIndex: 'time', key: 'time' },
  { title: '事件类型', dataIndex: 'type', key: 'type' },
  { title: '威胁等级', key: 'level' },
  { title: '来源IP', dataIndex: 'sourceIp', key: 'sourceIp' },
  { title: '描述', dataIndex: 'description', key: 'description' }
]

const securityLogs = ref([
  { time: '2023-12-01 14:30:00', type: '登录尝试', level: '中危', sourceIp: '192.168.1.100', description: '多次密码错误尝试' },
  { time: '2023-12-01 14:25:00', type: '文件访问', level: '低危', sourceIp: '192.168.1.50', description: '正常文件访问记录' },
  { time: '2023-12-01 14:20:00', type: '密钥使用', level: '高危', sourceIp: '192.168.1.200', description: '未授权密钥访问尝试' }
])

const getLevelColor = (level) => {
  const colorMap = {
    高危: 'red',
    中危: 'orange',
    低危: 'green'
  }
  return colorMap[level] || 'default'
}
</script>

<style lang="scss" scoped>
.security-encryption-container {
  padding: 24px;

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .title {
      font-size: 28px;
      font-weight: bold;
      color: $secondary-color;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 14px;
      color: $text-secondary;
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .stats-section,
  .encryption-management,
  .security-monitoring,
  .security-logs {
    margin-bottom: 24px;

    .stat-card {
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      display: flex;
      align-items: center;
      gap: 12px;

      .stat-icon {
        font-size: 32px;
        color: $secondary-color;
      }

      .stat-title {
        font-size: 14px;
        color: $text-secondary;
        margin-bottom: 4px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: $primary-color;
      }
    }

    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }

  .encryption-algorithms,
  .key-management {
    .algorithm-item,
    .key-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .algorithm-info,
      .key-info {
        .algorithm-name,
        .key-name {
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .algorithm-desc,
        .key-id {
          font-size: 12px;
          color: $text-secondary;
        }
      }
    }
  }

  .monitor-item {
    padding: 16px;
    border-radius: 8px;

    .monitor-title {
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 8px;
    }

    .monitor-status {
      margin-bottom: 8px;
    }

    .monitor-detail {
      font-size: 12px;
      color: $text-secondary;
    }
  }
}
</style>
